/**
 * Created by 69466 on 2018/9/13.
 */
import React, {Component} from 'react';
import {FlatList, StyleSheet,} from 'react-native';
import {Button, Dialog, Text, TouchableOpacity, View} from "react-native-ui-lib";
import {commonStyles} from "../../configs/commonStyle";
import {Icon} from '../components';
import navigator from "../../utils/navigator";
import ListSeparator from "./ListSeparator";

/**
 * 筛选对话框
 */
export default class FilterDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            startTimes: [
                {
                    rang: '00:00-06:00',
                    isChecked: false,
                    type: 1,
                },
                {
                    rang: '06:00-12:00',
                    isChecked: false,
                    type: 2,
                },
                {
                    rang: '12:00-18:00',
                    isChecked: false,
                    type: 3,
                }
                ,
                {
                    rang: '18:00-24:00',
                    isChecked: false,
                    type: 3,
                }
            ],
            stationTypes: [],
            startPoints: [],
            endPoints: [],
        };
    }

    show = (data) => {
        let startPoints=[];
        if(!IsNullOrEmpty(data.startList))
        {
            startPoints = data.startList.map(data => {
                data['isChecked'] = false
                return data;
            })
        }

        let endPoints=[];
        if(!IsNullOrEmpty(data.endList)) {
            endPoints = data.endList.map(data => {
                data['isChecked'] = false
                return data;
            })
        }
        this.setState({isOpen: true, startPoints, endPoints})
    }

    dismiss = () => {
        this.setState({isOpen: false})
    }

    renderPannableHeader = props => {
        return (
            <View>
                <View margin-15 row centerV spread>
                    <View flex>
                        <Text style={{...commonStyles.text_black_17}}>筛选</Text>
                    </View>
                    <TouchableOpacity onPress={this.dismiss}>
                        <Icon type="AntDesign" name={'close'} size={16} color={'#282828'}/>
                    </TouchableOpacity>

                </View>
                <View height={1} bg-line/>
            </View>
        );
    };


    render_item = ({item, index}) => {
        const {endPoints} = this.state;

        return (
            <TouchableOpacity
                onPress={() => {
                    const tempList = endPoints.map((item, pos) => {
                        if (index == pos) {
                            item.isChecked = !item.isChecked;
                        }
                        return item;
                    })
                    this.setState({
                        endPoints: tempList
                    })
                }}
                style={item.isChecked ? styles.tab_chekecd : styles.tab_normal}>
                <Text numberOfLines={1} style={commonStyles.text_black_12}>{item.placeName}</Text>
            </TouchableOpacity>
        );
    }

    render_stationType_item = ({item, index}) => {
        const {stationTypes} = this.state;

        return (
            <TouchableOpacity
                onPress={() => {
                    const tempList = stationTypes.map((item, pos) => {
                        item.isChecked = index == pos;
                        return item;
                    })
                    this.setState({
                        stationTypes: tempList
                    })
                }}
                style={item.isChecked ? styles.tab_chekecd : styles.tab_normal}>
                <Text numberOfLines={1} style={commonStyles.text_black_12}>{item.name}</Text>
            </TouchableOpacity>
        );
    }

    render_startPoint_item = ({item, index}) => {
        const {startPoints} = this.state;

        return (
            <TouchableOpacity
                onPress={() => {
                    const tempList = startPoints.map((item, pos) => {
                        if (index == pos) {
                            item.isChecked = !item.isChecked;
                        }
                        return item;
                    })
                    this.setState({
                        startPoints: tempList
                    })
                }}
                style={item.isChecked ? styles.tab_chekecd : styles.tab_normal}>
                <Text numberOfLines={1} style={commonStyles.text_black_12}>{item.placeName}</Text>
            </TouchableOpacity>
        );
    }

    render_startTimes_item = ({item, index}) => {
        const {startTimes} = this.state;

        return (
            <TouchableOpacity
                onPress={() => {
                    const tempList = startTimes.map((item, pos) => {
                        item.isChecked = index == pos;
                        return item;
                    })
                    this.setState({
                        startTimes: tempList
                    })
                }}
                style={item.isChecked ? styles.tab_chekecd : styles.tab_normal}>
                <Text numberOfLines={1} style={commonStyles.text_black_12}>{item.rang}</Text>
            </TouchableOpacity>
        );
    }

    renderHeader = () => {
        const {startTimes, endPoints, startPoints} = this.state;
        return (
            <View>
                <Text style={{...commonStyles.text_black_14_bold}}>出发时间</Text>
                <FlatList
                    data={startTimes}
                    showsHorizontalScrollIndicator={false}
                    keyboardShouldPersistTaps='always'
                    extraData={this.state}
                    style={{marginTop: 20}}
                    listKey={'startTime'}
                    contentContainerStyle={{flexGrow: 1,}}
                    keyExtractor={(item, index) => 'startTime_' + index}
                    renderItem={this.render_startTimes_item}
                    ItemSeparatorComponent={() => <ListSeparator backgroundColor={'transparent'} height={10}/>}
                    numColumns={2}
                />
                {/*<Text style={{...commonStyles.text_black_14_bold, marginTop: 20}}>站点类型</Text>*/}
                {/*<FlatList*/}
                {/*    data={stationTypes}*/}
                {/*    showsHorizontalScrollIndicator={false}*/}
                {/*    keyboardShouldPersistTaps='always'*/}
                {/*    extraData={this.state}*/}
                {/*    style={{marginTop: 20}}*/}
                {/*    listKey={'stationType'}*/}
                {/*    contentContainerStyle={{flexGrow: 1,}}*/}
                {/*    keyExtractor={(item, index) => 'stationType_' + index}*/}
                {/*    renderItem={this.render_stationType_item}*/}
                {/*    ItemSeparatorComponent={() => <ListSeparator backgroundColor={'transparent'} height={10}/>}*/}
                {/*    numColumns={2}*/}
                {/*/>*/}
                {
                    IsNullOrEmpty(startPoints)?null:
                        <Text style={{...commonStyles.text_black_14_bold, marginTop: 20}}>上车点</Text>
                }

                <FlatList
                    data={startPoints}
                    showsHorizontalScrollIndicator={false}
                    keyboardShouldPersistTaps='always'
                    extraData={this.state}
                    style={{marginTop: 20}}
                    listKey={'startPoint'}
                    contentContainerStyle={{flexGrow: 1,}}
                    keyExtractor={(item, index) => 'startPoint_' + index}
                    renderItem={this.render_startPoint_item}
                    ItemSeparatorComponent={() => <ListSeparator backgroundColor={'transparent'} height={10}/>}
                    numColumns={2}
                />
                {
                    IsNullOrEmpty(endPoints)?null:
                        <Text style={{...commonStyles.text_black_14_bold, marginBottom: 15, marginTop: 20}}>下车点</Text>
                }

            </View>
        )
    }

    save = () => {
        const {startTimes, startPoints, endPoints} = this.state;
        const startTIndex = startTimes.findIndex(data => data.isChecked === true)
        const startSPIndex = startPoints.findIndex(data => data.isChecked === true)
        const startEPIndex = endPoints.findIndex(data => data.isChecked === true)
        let timeType, startPlaceName, endPlaceName;
        if (startTIndex > -1) {
            timeType = startTimes[startTIndex].type
        }
        if (startSPIndex > -1) {
            startPlaceName = startPoints[startSPIndex].placeName
        }
        if (startEPIndex > -1) {
            endPlaceName = endPoints[startEPIndex].placeName
        }
        this.props.callBack({timeType, startPlaceName, endPlaceName})
        this.dismiss();
    }

    reset = () => {
        this.props.callBack({timeType: null, startPlaceName: null, endPlaceName: null})
        this.dismiss();
    }

    render() {
        const {isOpen, endPoints,} = this.state;
        return (
            <Dialog
                migrate
                width={'100%'}
                height={'60%'}
                bottom
                containerStyle={styles.roundedDialog}
                visible={isOpen}
                onDismiss={this.dismiss}
                renderPannableHeader={this.renderPannableHeader}
            >
                <View flex style={{}} padding-15>
                    <FlatList
                        data={endPoints}
                        showsVerticalScrollIndicator={false}
                        keyboardShouldPersistTaps='always'
                        extraData={this.state}
                        style={{}}
                        contentContainerStyle={{flexGrow: 1,}}
                        keyExtractor={(item, index) => 'endpoint_' + index}
                        renderItem={this.render_item}
                        ItemSeparatorComponent={() => <ListSeparator backgroundColor={'transparent'} height={10}/>}
                        numColumns={2}
                        ListHeaderComponent={this.renderHeader}
                    />
                </View>
                <View row spread bottom paddingH-20 paddingV-15>
                    <Button outline label={'重置'}
                            flex
                            onPress={() => this.reset()}
                            style={{backgroundColor: 'white'}}
                            color={'#FED13F'}
                            outlineColor={'#FED13F'}
                            borderRadius={7}/>

                    <Button label={'确定'}
                            flex
                            marginL-20
                            style={{backgroundColor: '#FED13F'}} color={'#49493D'}
                            borderRadius={7}
                            onPress={() => this.save()}
                    />
                </View>
            </Dialog>
        );
    }
}

const styles = StyleSheet.create({
    roundedDialog: {
        backgroundColor: 'white',
        borderRadius: 4
    },
    tab_chekecd: {
        borderRadius: 5,
        backgroundColor: '#FECC2A',
        paddingHorizontal: 10,
        paddingVertical: 7,
        marginRight: 10,
        width: '50%',
        alignItems: 'center'
    },
    tab_normal: {
        borderRadius: 5,
        backgroundColor: '#F7F7F7',
        paddingHorizontal: 10,
        paddingVertical: 7,
        marginRight: 10,
        width: '50%',
        alignItems: 'center'
    },
});


